<template>
	<div class="content-header">
		<el-scrollbar>
			<el-row style="overflow: auto;">
				<el-card class="collect-card-whole">
					<template #header>
						<div class="collect-title collect-header">
							<span>
								我的收藏
							</span>
						</div>
					</template>

					<div style="margin: 0 40px 20px 40px;" v-loading='list_loading' element-loading-text="拼命加载资源中"
						element-loading-background="rgba(255, 255, 255, 1)">
						<div style="min-height: 9.375rem;background-color: #FFFFFF;margin: 10px 0 10px 0;"
							v-show="list_loading">
						</div>
						<el-scrollbar max-height="500px">
							<div v-for="(item,index) in collectionList" :key="index" class="ranking-list-item"
								style="margin-bottom: 35px;display: flex;align-items: flex-end;">
								<!-- meta信息部分 -->
								<div class="collect-card-meta">
									<div class="collect-card-header">
										<img width="48" height="48" :src="item.icon" class="image" />
									</div>
									<div class="collect-card-content">
										<div class="collect-card-title">
											<el-link target="_blank"
												:href="getRootPath()+'/detail?rid='+item.recommendId"
												:underline="false">
												{{item.recommendName}}
											</el-link>
										</div>
										<div class="collect-card-description">
											{{item.description}}
										</div>
									</div>
								</div>
								<!-- 按钮操作部分 -->
								<div class="collect-card-action">

									<el-tooltip effect="dark" content="访问" placement="top-start">
										<el-button size="small" icon="el-icon-paperclip"
											@click.native="goLink(item.link)"></el-button>
									</el-tooltip>
									<el-tooltip effect="dark" content="取消收藏" placement="top-start">
										<el-button size="small" type="warning" icon="el-icon-star-on"
											@click.native="handleClickCollect(item.recommendId,index)">
										</el-button>
									</el-tooltip>

								</div>
							</div>
						</el-scrollbar>
						<el-pagination background layout="prev, pager, next" :total="listNum" :page-size="pageSize"
							:current-page="currentPage" @current-change="pageChange" v-show="pageView">
						</el-pagination>
					</div>
					<el-empty description="还没有收藏资源,赶紧去看看吧~" v-show="infoStatus"></el-empty>
				</el-card>
			</el-row>

		</el-scrollbar>
	</div>
</template>

<script lang="ts">
	export default {
		created() {
			this.getMycollection();
		},
		data() {
			return {
				list_loading: true,
				infoStatus: false,
				listNum: 0,
				currentPage: 1,
				pageSize: 6,
				pageView: false,
				collectionList: [],
			}
		},
		methods: {
			handleClickCollect(rid, index) {
				let that = this;
				// console.log('rid',rid);
				this.$axios({
					url: 'http://localhost:8080/findResource/collectResource',
					method: 'get',
					transformRequest: [function(data) {
						// 对 data 进行任意转换处理
						return data;
					}],
					headers: {
						'token': localStorage.pg_token
					},
					params: {
						userId: localStorage.pg_username,
						recommendId: rid,
					},
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result = JSON.parse(data);
						if (result.code === 200) {
							that.collectionList[index].hasCollect = result.data.hasCollect;
							that.$message.success(result.data.msg);
						} else {
							that.$message.error(result.msg);
						}
						that.$router.go(0);
						that.list_loading = false;
						return data;
					}],
				}).catch(function(error) {
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");
						// console.log(error.response.data);
						// console.log(error.response.status);
						// console.log(error.response.headers);
					} else if (error.request) {
						// 请求已经成功发起，但没有收到响应
						// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
						// 而在node.js中是 http.ClientRequest 的实例
						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
				});
			},
			goLink(rlink) {
				window.open(rlink, '_blank');
			},
			pageChange(currentPage) {
				this.currentPage = currentPage;
				this.recommendRecord = [];
				this.list_loading = true;
				this.getMycollection(currentPage, 6);
			},
			getRootPath() {
				//获取当前网址，如： http://localhost:8088/test/test.jsp
				let curPath = window.document.location.href;
				//获取主机地址之后的目录，如： test/test.jsp
				let pathName = window.document.location.pathname;
				let pos = curPath.indexOf(pathName);
				//获取主机地址，如： http://localhost:8088
				let localhostPath = curPath.substring(0, pos);
				//获取带"/"的项目名，如：/test
				let projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
				return (localhostPath); //发布前用此4
			},
			getMycollection(r_pageNum = 1, r_pageSize = 6) {
				let that = this;
				// console.log('rid',rid);
				this.$axios({
					url: 'http://localhost:8080/findResource/getCollections',
					method: 'get',
					headers: {
						// 'Content-Type': 'application/x-www-form-urlencoded',
						'token': localStorage.pg_token
					},

					params: {
						userId: localStorage.pg_username,
						pageNum: r_pageNum,
						pageSize: r_pageSize,
					},
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result = JSON.parse(data);
						if (result.code === 200) {
							if(result.data !== null) {
								that.collectionList = result.data.recommends;
								that.listNum = result.data.pageSum;
								that.pageView = true;
							} else {
								that.infoStatus = true;
							}
						} else {
							that.$message.error(result.msg);
						}
						that.list_loading = false;
						return data;
					}],
				}).catch(function(error) {
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");

					} else if (error.request) {

						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
					that.list_loading = false;
					that.infoStatus = true;
				});
			},
		}

	}
</script>

<style>
	.collect-card-meta {
		display: flex;
		flex: 1 1;
		align-items: flex-start;
		max-width: 100%;
	}

	.collect-card-action {
		flex: 0 0 auto;
		margin: 0 20px 0 20px;
		padding: 0;
		font-size: 0;
		list-style: none;
	}

	.collect-card-content {
		text-align: left;
		margin: 0.125rem 0 0 0;
	}

	.collect-card-title {
		margin-bottom: 0.3125rem;
	}

	.collect-card-header {
		margin-right: 1rem;
	}

	.collect-card-description {
		/* margin: 0 0 0 15px; */
		color: #999999;
		font-size: 14px;
	}

	.collect-title {
		color: #8b8b8b;
		font-size: 20px;
		margin-top: 0.3125rem;
	}
	
	.collect-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.image_avatar {
		border-radius: 50%;
	}

	.card-page {
		width: -webkit-fill-available;
		cursor: default !important;
		margin: 0 0.9375rem 0 0.9375rem;
		border-radius: 0.3125rem;
	}

	.el-row {
		height: auto;
	}

	.container {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		overflow: auto;
	}



	.card-list {
		margin-top: 0px !important;
		height: 100%;
		box-sizing: border-box;
		cursor: default !important;
		text-align: left;
	}

	.card_content {
		padding: 10px;
		color: #999999;
		font-size: 14px;
		text-align: center;
	}

	.card_content_time {
		/* padding: 10px; */
		color: #999999;
		font-size: 13px;
		text-align: left;
	}



	.content-header {
		display: flex;
		flex-grow: 1;
		margin: 0 5px 0 5px;
		flex-direction: column;
		/* flex-wrap: wrap; */
		/* background-color: #FFF; */
	}


	.card-lable {
		display: flex;
		align-items: stretch;
		text-align: center;
		height: 100%;
	}

	.card-lable-content {
		display: flex;
		align-items: auto;
		text-align: left;
		margin-bottom: 1.25rem;
		/* height: 100%; */
	}

	.grid-content {
		margin-bottom: 0.9375rem;
		border-radius: 4px;
		min-height: 30px;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.card-control {
		margin: 0.3125rem 0 0.3125rem 0;
		width: -webkit-fill-available;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.collect-card-whole {
		height: max-content;
		width: 100%;
		padding: 0 3.125rem;
		margin: 0 1.25rem;
	}

	/* .el-page-header__left{
		width: 0;
		display: none;
	} */
</style>
